<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/1/21
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>table-layui</title>
    <!--引入layui资源-->
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
    <table id="myTable"></table>
    <script>
        //在script标签内  编写layui代码
        //第一  引入要使用的模块   利用layui的内置对象layui的use方法
        layui.use('table',function () {
            //在内部的匿名函数内定义一个变量  保存该引用模块
            var table = layui.table;
            //table模块的render方法渲染表格   使其变成动态表格
            table.render({
                elem:'#myTable',        //要渲染的表格
                url:'json/table.json',  //数据接口  要渲染的数据
                heigth:312,             //
                page:true,              //开启分页
                cols:[[                 //表头
                    {field:'id',title:'编号'},
                    {field:'name',title:'姓名'},
                    {field:'age',title:'年龄'}
                ]]
            })
        })
    </script>
</body>
</html>
